<div class="mat-elevation-z1">
  <mat-toolbar>
    <span class="toolbar-title">币价</span>
    <span class="spacer"></span>
    <mat-checkbox [(ngModel)]="moreColumns" (change)="showEarlier()">更早</mat-checkbox>
    &nbsp;&nbsp;
    <button class="flex-button" mat-stroked-button color="primary" (click)="fetchQuotes()"
            [disabled]="processes.fetchQuotes">
      <mat-icon>refresh</mat-icon>
      刷新
    </button>
  </mat-toolbar>

  <table mat-table class="full-width" matSort>

    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let row; let index=index">
        {{index + 1}}
      </td>
    </ng-container>

    <ng-container matColumnDef="code">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>代号</th>
      <td mat-cell *matCellDef="let row">
        <span class="ccy-logo-code clickable" (click)="showCcyInfo(row)">
          <img class="ccy-logo" [src]="staticBase+row.logoPath" alt="">
          <span class="ccy-code">{{row.code}}</span>
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>名称</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>价格（美元）</th>
      <td mat-cell *matCellDef="let row">
        {{row.price | money}}
      </td>
    </ng-container>

    <ng-container matColumnDef="percent_change_1h">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Change 1H</th>
      <td mat-cell *matCellDef="let row"
          [class.price-up]="row.percent_change_1h>0"
          [class.price-down]="row.percent_change_1h<0">
        {{row.percent_change_1h | rawpercent }}
      </td>
    </ng-container>

    <ng-container matColumnDef="percent_change_24h">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Change 24H</th>
      <td mat-cell *matCellDef="let row"
          [class.price-up]="row.percent_change_24h>0"
          [class.price-down]="row.percent_change_24h<0">
        {{row.percent_change_24h | rawpercent }}
      </td>
    </ng-container>

    <ng-container matColumnDef="percent_change_7d">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Change 7D</th>
      <td mat-cell *matCellDef="let row"
          [class.price-up]="row.percent_change_7d>0"
          [class.price-down]="row.percent_change_7d<0">
        {{row.percent_change_7d | rawpercent }}
      </td>
    </ng-container>

    <ng-container matColumnDef="percent_change_30d">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Change 30D</th>
      <td mat-cell *matCellDef="let row"
          [class.price-up]="row.percent_change_30d>0"
          [class.price-down]="row.percent_change_30d<0">
        {{row.percent_change_30d | rawpercent }}
      </td>
    </ng-container>

    <ng-container matColumnDef="percent_change_60d">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Change 60D</th>
      <td mat-cell *matCellDef="let row"
          [class.price-up]="row.percent_change_60d>0"
          [class.price-down]="row.percent_change_60d<0">
        {{row.percent_change_60d | rawpercent }}
      </td>
    </ng-container>

    <ng-container matColumnDef="percent_change_90d">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Change 90D</th>
      <td mat-cell *matCellDef="let row"
          [class.price-up]="row.percent_change_90d>0"
          [class.price-down]="row.percent_change_90d<0">
        {{row.percent_change_90d | rawpercent }}
      </td>
    </ng-container>

    <ng-container matColumnDef="footer">
      <th mat-header-cell *matFooterCellDef colspan="8" class="sum-row">
        1H 平均：<span class="avg-percent"
                    [class.price-up]="avg1H>0"
                    [class.price-down]="avg1H<0">{{avg1H | rawpercent}}</span> &nbsp;&nbsp;
        24H 平均：<span class="avg-percent"
                     [class.price-up]="avg24H>0"
                     [class.price-down]="avg24H<0">{{avg24H | rawpercent}}</span>
        &nbsp;（除稳定币）
      </th>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <tr mat-footer-row *matFooterRowDef="['footer']"></tr>
  </table>

</div>

<p>&nbsp;</p>
